<div class="wmm-module">
    <div class="layui-form-item">
        <button class="layui-btn  layui-btn-sm layui-btn-normal" onclick="renders.box(null,true)">添加一级菜单</button>
    </div>

    <div class="layui-form-item">
        <form id="search-form" class="layui-form" action="javascript:;">
            <div class="layui-inline" style="width:300px">
                <select name="appsId" xm-select="appsId" xm-select-skin="normal">
                    <option value="">选择平台搜索</option>
                </select>
            </div>
            <div class="layui-inline">
                <button type="button" onclick="renders.renderTable()" class="layui-btn  layui-btn-sm layui-btn-normal datatable-search"><i
                        class="layui-icon layui-icon-search search-icon"></i>查询</button>
            </div>
        </form>
    </div>

    <div>
        <div id="tb-sys-menu" lay-filter="tb-sys-menu">
        </div>
    </div>
</div>


<template id="oper-col">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="add">添加</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</template>


<template id="tmp-menu-form">
    <div style="padding:10px">
        <form class="layui-form" lay-filter="parent-form" action="javascript:;">
            <input type="hidden" value="0" name="pid" />
            <input type="hidden" value="" name="id" />
            <div class="layui-form-item">
                <label class="layui-form-label">所属平台</label>
                <div class="layui-input-block">
                    <select name="appsId" xm-select="appsIdBox" xm-select-skin="normal">
                        <option value="">所有平台</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">图&nbsp;标</label>
                <div class="layui-input-inline" style="width:280px">
                    <input type="text" id="iconPicker" value="layui-icon-face-smile-fine" name="icon" lay-filter="iconPicker"
                        class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">简称&后缀<span class="required-star">*</span></label>
                <div class="layui-input-inline" style="width:150px">
                    <input type="text" name="firstName" autocomplete="off" lay-verify="required" placeholder="会员" class="layui-input">
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline" style="width:150px">
                    <input type="text" name="secondName" autocomplete="off" placeholder="管理" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">排序号</label>
                <div class="layui-input-block">
                    <input type="number" name="score" lay-verify="required" value="0" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">菜单编号</label>
                <div class="layui-input-block">
                    <input type="text" name="menuCode" placeholder="菜单编号" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">类型</label>
                <div class="layui-input-block">
                    <input type="radio" name="menuType" lay-filter="menuType" value="FOLDER" title="目录" checked>
                    <input type="radio" name="menuType" lay-filter="menuType" value="PAGE" title="页面">
                </div>
            </div>

            <div class="layui-form-item form-menu-route display-none">
                <label class="layui-form-label">路由地址<span class="required-star">*</span></label>
                <div class="layui-input-block">
                    <input type="text" name="route" placeholder="根目录绝对路径(可携带参数):/project_name/pages/user" autocomplete="off"
                        class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-sm lay-submit layui-btn-normal" lay-submit lay-filter="menu-first">立即提交</button>
                    <button type="reset" class="layui-btn  layui-btn-sm layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</template>

<template id="tmp-menu-child-form">
    <div style="padding:10px">
        <form class="layui-form" lay-filter="child-form" action="javascript:;">
            <input type="hidden" value="" lay-verify="required" name="pid" />
            <input type="hidden" value="" name="id" />
            <input type="hidden" value="" name="appsId" />
            <div class="layui-form-item">
                <label class="layui-form-label">父级菜单</label>
                <div class="layui-input-block">
                    <span data-name="parentName" class="readonly" style="position: relative;top: 9px;"></span>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">菜单名称 <span class="required-star">*</span></label>

                <div class="layui-input-block">
                    <input type="text" name="menuName" autocomplete="off" lay-verify="required" placeholder="请输入菜单名称"
                        class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">排序号</label>
                <div class="layui-input-block">
                    <input type="number" name="score" lay-verify="required" value="0" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">菜单编号</label>
                <div class="layui-input-block">
                    <input type="text" name="menuCode" placeholder="菜单编号" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">类型</label>
                <div class="layui-input-block">
                    <input type="radio" name="menuType" lay-filter="menuType" value="FOLDER" title="目录">
                    <input type="radio" name="menuType" lay-filter="menuType" value="PAGE" title="页面" checked>
                </div>
            </div>

            <div class="layui-form-item form-menu-route">
                <label class="layui-form-label ">路由地址<span class="required-star">*</span></label>
                <div class="layui-input-block">
                    <input type="text" name="route"  placeholder="根目录绝对路径(可携带参数):/project_name/pages/user"
                        autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn  layui-btn-sm lay-submit layui-btn-normal" lay-submit lay-filter="menu-child">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-sm layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</template>
<script>

    new Wmm({

        imports: ["treetable", "form", "iconPicker", "table", "api", "sysTools"],
        vars: {
            appList: undefined
        },
        methods: {
            //数据转换
            convert: function (arr, current) {
                current = current || [];
                arr.forEach(function (elem) {
                    if (elem.children) {
                        elem.children.forEach(function (child) {
                            child.parentName = elem.menuName;
                        })
                        methods.convert(elem.children, current);
                    }
                    current.push(elem);
                    delete elem;
                });
                return current;
            },
        },
        listener: function () {
            var form = fb.form;
            form.render();
            fb.table.on('tool(tb-sys-menu)', function (obj) {
                switch (obj.event) {
                    case "add":
                        renders.boxChild(obj.data, true);
                        break;
                    case "edit":
                        if (obj.data.pid === 0) {
                            //编辑一级菜单
                            renders.box(obj.data, false);
                            break;
                        }
                        //编辑二级菜单
                        renders.boxChild(obj.data, false);
                        break;
                    case "del":

                        layer.msg('要删除该菜单及其子菜单吗？', {
                            time: 10000,
                            btn: ['是的', '我再想想'],
                            yes: function () {
                                fb.api.menu.delete(obj.data.id, function () {
                                    layer.msg("删好了");
                                    renders.renderTable();
                                });
                            }
                        });
                        break;
                }
            });

            function doSubmit(data) {
                var menuObject = data.field;
                if (!menuObject.menuName) {
                    menuObject.menuName = menuObject.firstName + menuObject.secondName;
                }
                if (menuObject.appsId) {
                    menuObject.appsId = fb.formSelects.value("appsIdBox", "val");
                } else {
                    delete menuObject.appsId;
                }
                if (menuObject.id) {
                    //update
                    fb.api.menu.update(menuObject, function () {
                        layer.closeAll();
                        layer.msg("改好了");
                        renders.renderTable();
                    });
                    return;
                }
                //insert
                fb.api.menu.add(menuObject, function () {
                    layer.msg("加好了...你继续");
                    renders.renderTable();
                });
            };
            form.on('submit(menu-first)', doSubmit);
            form.on('submit(menu-child)', doSubmit);


            fb.form.on("radio(menuType)", function (data) {
                if ("FOLDER" === data.value) {
                    document.querySelector(".form-menu-route").classList.add("display-none");
                    return;
                }
                document.querySelector(".form-menu-route").classList.remove("display-none");
            });
        },
        renders: {


            fixMenuTypeFormDisplay: function (type) {
                if ("FOLDER" === type) {
                    document.querySelector(".form-menu-route").classList.add("display-none");
                    return;
                }
                document.querySelector(".form-menu-route").classList.remove("display-none");
            },

            //显示添加一级菜单
            box: function (data, isCreate) {
                layer.open({
                    type: 1,
                    title: (isCreate ? "添加" : "修改") + "一级菜单",
                    content: document.querySelector("#tmp-menu-form").innerHTML,
                    area: ['500px', '490px'],
                    success: function () {
                        renders.initIconPicker();
                        sysTools.renderAppSelect("appsIdBox");
                        fb.form.render();
                        if (!isCreate) {
                            debugger
                            //表单初始赋值
                            fb.form.val('parent-form', data);
                            fb.formSelects.value("appsIdBox", data.appsId);
                            fb.iconPicker.checkIcon('iconPicker', data.icon);
                            renders.fixMenuTypeFormDisplay(data.menuType);
                        }
                    }
                });
            },
            //显示添加非一级菜单
            boxChild: function (data, isCreate) {
                layer.open({
                    type: 1,
                    title: (isCreate ? "添加" : "修改") + "下级菜单",
                    content: document.querySelector("#tmp-menu-child-form").innerHTML,
                    area: ['500px', '475px'],
                    success: function () {
                        if (!isCreate) {
                            //修改
                            fb.form.val('child-form', data);
                            document.querySelector("[data-name=parentName]").innerHTML = data.parentName + "(不可修改)";
                            renders.fixMenuTypeFormDisplay(data.menuType);
                        } else {
                            //添加
                            fb.form.val('child-form', {
                                pid: data.id,
                            })
                            document.querySelector("[data-name=parentName]").innerHTML = data.menuName + "(不可修改)";
                        }
                    }
                });

            },
            //图标选择器初始化
            initIconPicker: function () {
                fb.iconPicker.render({
                    // 选择器，推荐使用input
                    elem: '#iconPicker',
                    // 数据类型：fontClass/unicode，推荐使用fontClass
                    type: 'fontClass',
                    // 是否开启搜索：true/false
                    search: true,
                    // 是否开启分页
                    page: true,
                    // 每页显示数量，默认12
                    limit: 12,
                    // 点击回调
                    click: function (data) {
                        console.log(data);
                    },
                    // 渲染成功后的回调
                    success: function (d) {
                    }
                });

            },


            renderTable: function () {
                fb.api.menu.get(fb.utils.toFormData(document.querySelector("#search-form")), function (ret) {
                    var arr = methods.convert(ret);
                    fb.treetable.render({
                        treeColIndex: 0,
                        treeSpid: 0,
                        treeIdName: 'id',
                        treePidName: 'pid',
                        treeDefaultClose: true,
                        treeLinkage: true,
                        elem: '#tb-sys-menu',
                        data: arr,
                        treeIcon: 'icon',
                        height: "650px",
                        cols: [[
                            { field: 'menuName', title: '菜单名称', },
                            {
                                field: 'menuType', title: '类型', templet: function (d) {
                                    return d.menuType === "FOLDER" ? "目录" : "页面"
                                }
                            },
                            {
                                field: 'children', title: '子菜单数', width: 100, templet: function (d) {
                                    return d.children ? d.children.length : 0;
                                }
                            },
                            { field: 'route', title: '路由地址', sort: true },
                            { field: 'firstName', title: '简称', width: 120 },
                            { field: 'secondName', title: '后缀名称', width: 130 },
                            { field: 'score', title: '排序号' },
                            { templet: '#oper-col', title: '操作' }

                        ]],
                        done: function () {
                            fb.treetable.expandAll("#tb-sys-menu")
                        }
                    });
                });
            },
            //数据表初始化
            render: function () {
                sysTools.renderAppSelect();
                renders.renderTable();
            },
        },

    });




</script>